<!-- 城市选择 -->
<template>
  <div class="my-city">
    <section id="my-city" class="city-list-container">
      <van-index-bar :index-list="indexList">
        <!-- 定位城市开始 -->
        <section>
          <van-index-anchor class="city-title" index="定位">
            定位城市
          </van-index-anchor>
          <div class="city-list city-list-inline clearfix">
            <div class="location-city">定位失败，请点击重试</div>
          </div>
        </section>
        <!-- 定位城市结束 -->
        <!-- 最近访问城市开始 -->
        <section class="history-city-list">
          <van-index-anchor class="city-title" index="最近">
            最近访问城市
          </van-index-anchor>
          <div class="city-list city-list-inline clearfix">
            <div class="city-item">北京</div>
            <div class="city-item">上海</div>
            <div class="city-item">广州</div>
          </div>
        </section>
        <!-- 最近访问城市结束 -->
        <!-- 热门城市开始 -->
        <van-index-anchor class="city-title" index="热门">
          热门城市
        </van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div
            class="city-item"
            v-for="city in cities.slice(0, 12)"
            :key="city.id"
            @click="changeCity(city)"
          >
            {{ city.nm }}
          </div>
        </div>
        <!-- 热门城市结束 -->
        <!-- 字母开头城市开始 -->
        <section v-for="(city, key) in cts" :key="key">
          <van-index-anchor class="city-title city-title-letter" :index="key">
            {{ key }}
          </van-index-anchor>
          <div class="city-list city-list-block clearfix">
            <div
              class="city-item"
              v-for="ct in city"
              @click="changeCity(ct)"
              :key="ct.id"
            >
              {{ ct.nm }}
            </div>
          </div>
        </section>
        <!-- 字母开头城市结束 -->
      </van-index-bar>
    </section>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import { IndexAnchor, IndexBar } from "vant";
Vue.use(IndexBar);
Vue.use(IndexAnchor);
import axios from "@/api/instance.js";
import _ from "lodash";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      cities: [],
      indexList: ["定位", "最近", "热门"],
    };
  },
  //监听属性 类似于data概念
  computed: {
    cts() {
      let ctsObj = _.groupBy(this.cities, (v) => v.py.slice(0, 1));
      let ctsObj2 = Object.keys(ctsObj)
        .sort()
        .reduce((obj, key) => {
          let upperKey = key.toUpperCase();
          this.indexList.push(upperKey);
          obj[upperKey] = ctsObj[key];
          return obj;
        }, {});
      return ctsObj2;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeCity(city) {
      // 后面可以使用vuex
      localStorage.setItem("cityName", city.nm);
      localStorage.setItem("cityId", city.id);
      this.$router.back();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    let result = await axios.get("/cities.json");
    this.cities = result.cts;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
@import url("@/assets/border.less");
.my-city {
  position: absolute;
  width: 100%;
  height: 100%;
  .city-list-container {
    position: absolute;
    z-index: 1000;
    background-color: #ebebeb;
    font-size: 0.14rem;
    color: #333;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
  }
  .clearfix::after {
    content: " ";
    display: table;
    clear: both;
  }
  .city-title {
    line-height: 30px;
  }
  .city-title-letter {
    padding-left: 25px;
  }
  .city-list {
    padding-right: 30px;
  }
  .city-list-inline {
    background-color: #f5f5f5;
    padding-bottom: 8px;
  }
  .city-list-block {
    background-color: #f5f5f5;
  }
  .city-list-inline .location-city,
  .city-list-inline .city-item {
    float: left;
    background-color: #fff;
    width: 29%;
    box-sizing: border-box;
    height: 0.33rem;
    margin-top: 15px;
    margin-left: 4%;
    padding: 0 4px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    line-height: 0.33rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .city-list-block .city-item {
    height: 0.45rem;
    line-height: 0.45rem;
    margin-left: 0.15rem;
    .border-1px(0 0 1px 0);
  }
  .city-list-block .city-item:last-child {
    border-bottom: none;
  }
}
</style>
<style>
.van-index-bar__index {
  margin-bottom: 0.04rem;
}
</style>